<template>
	<view>
		<view v-if="title" :class="['o-title', colorClass]" :style="colorStyle" >{{title}}</view>
		<view :class="['o-grid', Gutter]"><slot /></view>
	</view>
</template>

<script>
	export default {
		name:'oGrid',
		// #ifdef MP-WEIXIN
		options:{ virtualHost:true },
		// #endif
		
		props:{
			title:{
				type:String,
				default:''
			},
			col:{
				type:[Number,String],
				default:3
			},
			border:{
				type:[Boolean,String],
				default:false
			},
			size:{
				type:String,
				default:'md'
			},
			bg:{
				type:String,
				default:'bg-white'
			},
			color:{
				type:String,
				default:'#444'
			},
			square:{
				type:[Boolean,String],
				default:false
			},
			gutter:{
				type:[Boolean,String],
				default:false
			},
			radius:{
				type:[Boolean,String],
				default:false
			},
			direction:{
				type:String,
				default:''
			},
			titlecolor:{
				type:String,
				default:'#333'
			}
		},
		provide(){
			return{
				oGrid:this
			}
		},
		data(){
			return {
				colorStyle:'',
				colorClass:''
			}
		},
		computed:{
			Gutter(){
				if(!this.gutter || this.gutter==='false') return '';
				else return 'gutter';
			}
		},
		methods:{
			titColor(){
				if(this.titlecolor.startsWith('#') || this.titlecolor.startsWith('rgb(') || this.titlecolor.startsWith('rgba(')) {
					this.colorStyle = 'color:' + this.titlecolor 
				} else {
					this.colorClass = this.titlecolor 
				}
			}
		},
		created() {
			this.titColor();
		},
		watch:{
			tit(val){
				this.titColor();
			}
		}
	}
</script>

<style lang="scss">
	.o-grid {
		display: flex;
		flex-wrap: wrap;
		&.gutter{padding:10rpx;}
	}
	.o-title{
		font-size: 32rpx;
		color: #555;
		font-weight: 600;
		// line-height: 60rpx;
		padding:32rpx 0 20rpx 40rpx;
		position: relative;
		&::before{
			position: absolute;
			content:'';z-index:2;
			left:16rpx;bottom:24rpx;
			height:28rpx;width:8rpx;
			border-radius:30px;
			background-color:#999;
		}
	}
</style>
